<template>
  <div class="third_user">
    <el-form class="third-form" inline ref="form" label-width="60px" @submit.prevent @keypress.enter="onSearchClick">
      <el-form-item>
        <Button label="新增账号" type="primary" @click="onAddClick" />
      </el-form-item>
      <el-form-item>
        <el-input class="third_input" v-model="accountData.search.accAliasName" clearable placeholder="请输入账号名称"></el-input>
      </el-form-item>
      <el-form-item>
        <el-input class="third_input" v-model="accountData.search.accNo" clearable placeholder="请输入账号"></el-input>
      </el-form-item>
      <el-form-item>
        <Button label="重置" @click="onResetClick" />
        <Button label="搜索" type="primary" @click="onSearchClick" />
      </el-form-item>
    </el-form>

    <div class="outerTable">
      <el-table ref="tableRef" :height="tableHeight" :data="accountData.list" stripe>
        <el-table-column fixed="left" type="index" label="#" width="50" />
        <el-table-column prop="accAliasName" label="账号名称" />
        <el-table-column prop="accNo" label="账号" />
        <el-table-column label="角色">
          <template #default="scope">
            <span v-for="item in scope.row.supplierAccountAuthorityList" :key="item.supplierAuthorityId" style="padding-right: 7px">{{ item.authorityName }}</span>
          </template>
        </el-table-column>

        <el-table-column prop="isForbid" label="状态" width="100" :formatter="(row, column, cellValue, index) => $formater.formaterStatus(cellValue)" />
        <el-table-column fixed="right" label="操作" width="140" v-loading="loading">
          <template #default="scope">
            <Link label="编辑" @click="onEditClick(scope.row)" />
            <Link label="解除冻结" v-if="scope.row.isForbid === 'YES'" @click="onChangeStatusClick(scope.row, 'NO')" />
            <Link label="冻结" v-else @click="onChangeStatusClick(scope.row, 'YES')" />
            <Link label="删除" @click="onDeleteClick(scope.row)" />
          </template>
        </el-table-column>
      </el-table>

      <Pager :page="accountData.search.page" :pageSizes="accountData.search.pageSizes" :total="accountData.total" :limit="accountData.search.limit" @current-change="onCurrentChange" @size-change="onSizeChange" />
    </div>
  </div>

  <User v-model:visible="userVisble" :form="accountData.form" @change="onUseChange" />
</template>
<script setup>
import { reactive, ref, onMounted, nextTick } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import md5 from 'js-md5'
import api from '@/api'
import consts from '@/consts'
import formater from '@/formater'
import { calcTableHeight } from '@/assets/js/utils.js'
import Pager from '@/components/pager/index.vue'
import Link from '@/components/button/link.vue'
import Button from '@/components/button/button.vue'
import User from './components/user.vue'

const { tableRef, tableHeight } = calcTableHeight()

const accountData = reactive({
  total: 0,
  list: [],
  form: {},
  search: {
    page: 1,
    limit: consts.Limit,
    pageSizes: consts.PageSize,
    accNo: '',
    accAliasName: ''
  }
})
const userVisble = ref(false)
const loading = ref(false)

const delEmployee = async (row) => {
  let { err } = await api.post(`/medinstrument/third/account/del/${row.supplierAccountId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
  }
}

const changeStatus = async (row, isForbid) => {
  let { err } = await api.post(`/medinstrument/third/account/updateStatus?isForbid=${isForbid}&&supplierAccountId=${row.supplierAccountId}`)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
  }
}

const save = async (form) => {
  let params = {
    accAliasName: form.accAliasName,
    accNo: form.accNo,
    supplierAccountId: form.supplierAccountId,
    password: ''
  }
  params.supplierAuthorityId = form.authorityIds.join(',')
  if (form.password) {
    params.password = md5(form.password)
  }

  let url = '/medinstrument/third/account/addAccount'
  if (params.supplierAccountId) {
    url = '/medinstrument/third/account/updateAccount'
  }
  let { err } = await api.post(url, params)
  if (err) {
    ElMessage.error(err)
  } else {
    loadData()
  }
}

const loadData = async () => {
  loading.value = true
  let { err, data } = await api.get('/medinstrument/third/account/list', accountData.search)
  loading.value = false
  if (err) {
    ElMessage.error(err)
  } else {
    accountData.list = data.list
    accountData.total = data.count
  }
}

const onAddClick = () => {
  accountData.form = {}
  accountData.form.authorityIds = []
  userVisble.value = true
}

const onEditClick = (row) => {
  accountData.form = Object.assign({}, row)
  accountData.form = {
    accAliasName: row.accAliasName,
    accNo: row.accNo,
    supplierAccountId: row.supplierAccountId,
    password: ''
  }
  accountData.form.authorityIds = row.supplierAccountAuthorityList?.map((e) => e.supplierAuthorityId)

  userVisble.value = true
}

const onChangeStatusClick = (row, isForbid) => {
  changeStatus(row, isForbid)
}

const onUseChange = (val) => {
  save(val)
}

const onDeleteClick = (row) => {
  ElMessageBox.confirm(`确定要删除${row.accAliasName}吗，不可恢复？`, '系统', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  })
    .then(() => {
      delEmployee(row)
    })
    .catch(() => {})
}

const onResetClick = () => {
  accountData.search.accNo = ''
  accountData.search.accAliasName = ''
  loadData()
}

const onCurrentChange = (val) => {
  accountData.search.page = val
  loadData()
}

const onSizeChange = (val) => {
  accountData.search.limit = val
  loadData()
}

const onSearchClick = () => {
  accountData.search.page = 1
  loadData()
}

onMounted(() => {
  loadData()
})
</script>
